<template>
	<view class="gy-patient-preview gy-mask" :class="'gy-mask-' + isShow" :style="[props.top ? {
		    top: props.top + 'px !important',
		    height: `calc(100vh - ${props.top + 'px'}) !important`
		} : {}]" @click.stop="closeFn">
		<view class="gy-patient-preview-panel" :class="'gy-patient-preview-panel-' + isShow"
			:style="{backgroundColor: props.bgColor}" @click.stop="">
			<view class="gy-patient-preview-box" :class="'gy-patient-preview-box-' + isShow">
				<view class="gy-patient-name">{{ current.name || "" }}</view>
				<l-qrcode :value="current.hisCode" size="380rpx" />
				<view class="gy-patient-tips">扫一扫上面二维码，缴费、取报告轻松搞定</view>
			</view>
			<view class="gy-patient-preview-close" @click.stop="closeFn">
				<text class="gy_icon_close"></text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue";

	import LQrcode from '@/uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue';
	
	const { proxy }: any = getCurrentInstance();
	
	const emits = defineEmits(["close", "submit"]);

	const props = defineProps({
		top: {
			type: Number,
			default: 0
		},
		bgColor: {
			type: String
		}
	});
	
	const current = computed(() => proxy.store.patient.current);

	const isShow = ref("show");
	
	function closeFn() {
		isShow.value = "hide";
		setTimeout(() => {
			emits("close");
		}, 550)
	}

</script>

<style lang="scss" scoped>
	.gy-patient-preview {

		.gy-patient-preview-panel {
			width: 100%;
			position: absolute;
			top: -100%;
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			background-color: #ffffff;
			padding: 50rpx 50rpx 100rpx 50rpx;
			.gy-patient-preview-close{
				position: absolute;
				bottom: -150rpx;
				left: 50%;
				margin-left: -45rpx;
				width: 90rpx;
				height: 90rpx;
				@include flex-center-center;
				border: 4rpx solid #ffffff;
				border-radius: 50%;
				text{
					font-size: 40rpx;
					color: #ffffff;
				}
			}
			.gy-patient-preview-box {
				transform: scale(0.5);
				@include flex-center-center-column;

				.gy-patient-name {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: var(--gy-gap);
				}

				.gy-patient-qrcode {
					display: block;
					width: 380rpx;
					height: 380rpx;
				}

				.gy-patient-tips {
					margin-top: var(--gy-gap);
					font-size: 24rpx;
					color: #999999;
					text-align: center;
				}
			}

			.gy-patient-preview-box.gy-patient-preview-box-show {
				animation: gy-patient-preview-box-show .3s;
				animation-fill-mode: forwards;
				animation-delay: 0.3s;
			}

			.gy-patient-preview-box.gy-patient-preview-box-hide {
				animation: gy-patient-preview-box-hide .2s;
				animation-fill-mode: forwards;
			}

			@keyframes gy-patient-preview-box-show {
				from {
					transform: scale(0.5);
				}

				to {
					transform: scale(1);
				}
			}

			@keyframes gy-patient-preview-box-hide {
				from {
					transform: scale(1);
				}

				to {
					transform: scale(0.5);
				}
			}
		}

		.gy-patient-preview-panel.gy-patient-preview-panel-show {
			animation: gy-patient-preview-panel-show .5s;
			animation-fill-mode: forwards;
		}

		.gy-patient-preview-panel.gy-patient-preview-panel-hide {
			animation: gy-patient-preview-panel-hide .5s;
			animation-fill-mode: forwards;
		}

		@keyframes gy-patient-preview-panel-show {
			from {
				top: -100%;
			}

			to {
				top: 0;
			}
		}

		@keyframes gy-patient-preview-panel-hide {
			from {
				top: 0;
			}

			to {
				top: -100%;
			}
		}

	}
</style>